<template>
  <a
    class="company-item-container"
    :style="{
      background: data.img ? `url(${data.img})` : '#aaa',
    }"
    :href="data.link || null"
  >
    <div class="tag">{{ data.tag }}</div>
    <div class="company">{{ data.company }}</div>
  </a>
</template>

<script>
export default {
  props: {
    data: {
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.company-item-container {
  width: 100%;
  height: 228px;
  display: flex;
  flex-direction: column-reverse;
  cursor: pointer;
  .tag,
  .company {
    width: 100%;
    text-align: center;
    color: white;
  }

  .tag {
    $tag-height: 24px;
    height: $tag-height;
    line-height: $tag-height;
    background: #285fce;
    font-size: 13px;
  }

  .company {
    $company-height: 36px;
    height: $company-height;
    line-height: $company-height;
    background: rgba(0, 0, 0, 0.5);
    font-size: 15px;
  }
}
</style>
